<template>
	<view style="padding:20upx">
		<view class="content">
			<input :min="6" :max="30" v-model="cardNumber" class="input" placeholder="请输入卡号" />
			<input :min="6" :max="30" type="password" v-model="cardPassword" class="input" placeholder="请输入密码" />
			<view style="display: flex; justify-content: space-between;">
				<input :min="4" class="input" v-model="captcha" placeholder="请输入验证码" style="width: 160px;"></input>
				<img :src="captchaPath" height="36" @click="getCaptcha()" alt="">
			</view>
		</view>
		<button class="login-btn" @click="fastRecharge">充值</button>
	</view>
</template>
<script>
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		data() {
			return {
				uuid: '',
				captcha: '',
				captchaPath: '',
				userId: '',
				cardNumber: '',
				cardPassword: '',
			}
		},
		created() {
			this.getCaptcha()
		},
		methods: {
			getUUID() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
					return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
				})
			},
			// 获取验证码
			getCaptcha() {
				this.uuid = this.getUUID()
				 this.captchaPath = 'http://39.105.185.57:9002/mobileapi/mobile/captcha.jpg?uuid=' + this.uuid
//				this.captchaPath = 'http://192.168.10.43:9002/mobileapi/mobile/captcha.jpg?uuid=' + this.uuid
			},
			fastRecharge() {
				if (this.cardNumber == '' || this.cardPassword == '') {
					uni.showToast({
						title: '卡号密码不能为空',
						icon: 'none'
					});
					return;
				}
				if (this.captcha == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				try {
					this.userId = uni.getStorageSync('userId')
					const params = {
						uuid: this.uuid,
						captcha: this.captcha,
						userId: this.userId,
						cardNumber: this.cardNumber,
						cardPassword: this.cardPassword,
					}
					post('mobileapi/mobile/member/usercenter/fastRecharge', params).then(res => {
						if (res.code == 0) {
							uni.redirectTo({
								url:'rechargeLog'
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				} catch (e) {}
			}
		}
	}
</script>
<style>
	.content {
		background: #ffffff;
		margin: 60upx auto;
		border-radius: 20upx;
		font-size: 28upx;
		padding: 20upx;
	}

	.login-btn {
		font-size: 30upx;
		background: #D7000F;
		color: #FFFFFF;
	}
</style>
